<template>
	<view class="content">
		<div class='home'>
			<!-- 顶部 -->
			<div class='header'>
				<image class="img" src="../../static/loginimg.png"></image>
			    <div class='seek'>
					<text class="title">点击登录</text>
					<text class='word'>25小时高强度冲浪选手</text>
				</div>
			</div>
			<!-- 下部分整体 -->
			<div class='hr'></div>
			<div class='main'>	
			<div class='ball'>
				<div class="ball-item">
					<image class="img" src="../../static/01.png"></image>
					<text class="title">邀请好友</text>
					<text class='word'>+3积分一位</text>
				</div>
				<div class="ball-item">
					<image class="img" src="../../static/01.png"></image>
					<text class="title">邀请好友</text>
					<text class='word'>+3积分一位</text>
				</div>
				<div class="ball-item">
					<image class="img" src="../../static/01.png"></image>
					<text class="title">邀请好友</text>
					<text class='word'>+3积分一位</text>
				</div>
			</div>
			
			<div class='option'>
				<text class="left">平台通知</text>
				<text class="right">></text>
			</div>
						<div class='hr'></div>
			<div class='option'>
				<text class="left">我的积分</text>
				<text class="right">></text>
			</div>
			<div class='option'>
				<text class="left">领取积分</text>
				<text class="right">></text>
			</div>
						<div class='hr'></div>
			<div class='option'>
				<text class="left">我的收藏</text>
				<text class="right">></text>
			</div>
			<div class='option'>
				<text class="left">我的下载</text>
				<text class="right">></text>
			</div>
			<div class='option'>
				<text class="left">我的投稿</text>
				<text class="right">></text>
			</div>
			<div class='hr'></div>
			<div class='option'>
				<text class="left">联系客服</text>
				<text class="right">></text>
			</div>
			<div class='option'>
				<text class="left">清理缓存</text>
				<text class="right">></text>
			</div>
			<div class='option'>
				<text class="left">关于我们</text>
				<text class="right">></text>
			</div>
			</div>
		</div>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				
			}
		},
	}
</script>

<style lang="stylus">
	*
		margin: 0%;
		padding: 0;
	.content 
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: -webkit-linear-gradient(left,rgb(223,115,1),#f6a539);
	.home
		width: 100%;
		height: 100%;
		.header
			width: 100%
			height: 90rpx
			display: flex
			align-items: center
			padding: 0 40rpx
			box-sizing: border-box
			margin-top: 28px
			margin-bottom: 20px
			.img
				width: 125rpx
				height: 125rpx;
				border-radius: 50%
				margin-right: 10px
			.seek
				width: 150px
				height: 30px
				display: flex
				flex-direction: column
				.title
					color: #fff
					font-size: 20px
				.word
					color: #fff
					font-size: 12px
		.hr
			width: 100%;
			height: 30px;
			background-color: black
			border-top-left-radius: 30px
			border-top-right-radius: 30px
		.main
			width: 100%
			height: 100%
			background-color: black
			.ball
				width: 100%
				height: 100%
				display: flex
				justify-content: space-around
				.ball-item
					width: 80px
					height: 130px
					display: flex
					flex-direction: column
					.img
						width: 90rpx
						height: 90rpx;
						border-radius: 50%
						margin-right: 10px
						margin-top: 12px
						margin-left: 8px
					.title
						margin-left:6px 
						color: #fff
						font-size: 12px
						font-weight: 700
					.word
						color: #c0c4cc
						font-size: 11px
			.option
				margin: 0 auto
				width: 330px
				height: 55px
				line-height: 50px
				display: flex
				justify-content: space-between
				.left
					color: #fff
					font-weight: 700
					font-size: 15px
				.right
					color: #fff
					font-weight: 700
					font-size: 15px
</style>
